<template>
    <mu-paper
            :style="{height:`${h}px`,borderRadius:`${r}px`,width:w==='auto'?w:`${w}px`}"
            :class="colorSets[color]">
        <div class="pad5 flex-c h100">
            <div class="flrc">
                <title-a-w class="c11 fs9 flex1">{{title}}</title-a-w>
                <div>
                    <mu-button @click="refresh" small class="cf" icon>
                        <mu-icon value="refresh"></mu-icon>
                    </mu-button>
                </div>
            </div>
            <div class="cf fwb fs28 tac flex1 flcc">
                {{data}}
            </div>
            <div class="cf op7 fs6 tar">更新：{{$utils.str2time(updateAt)}}</div>
        </div>
    </mu-paper>
</template>

<script>
    import TitleA from "@/comps/comm/TitleA";
    import TitleAW from "@/comps/comm/TitleAW";

    export default {
        name: "EzFocusCountA",
        components: {TitleAW, TitleA},
        props: {
            focusKey: "",
            api: "",
            color: {
                default: 0,
                type: Number,
            },
            h: {
                default: "130",
                type: String
            },
            w: {
                default: "auto",
                type: String
            },
            r: {
                default: "7",
                type: String
            },

        },
        data() {
            return {
                //red pink purple deep-purple indigo blue light-blue cyan teal green light-green lime yellow amber orange deep-orange
                colorSets: [
                    "mdui-color-red",
                    "mdui-color-green",
                    "mdui-color-pink",
                    "mdui-color-cyan",
                    "mdui-color-purple",
                    "mdui-color-orange",
                    "mdui-color-blue",
                    "mdui-color-amber",
                    "mdui-color-lime",
                    "mdui-color-indigo",
                ],
                title: "",
                data: "",
                updateAt: ""
            }
        },
        mounted() {
            let data = this.$ezstore.counter.get(this.focusKey)
            if (!data){
                this.getData()
            }else {
                this.title = data.title
                this.data = data.data
                this.updateAt = data.updateAt
            }
        },
        methods: {
            getData() {
                this.$http.post(this.api, {key: this.focusKey}, res => {
                    if (res.data !== undefined) {
                        this.title = res.data.title
                        this.data = res.data.data
                        this.updateAt = res.data.updateAt
                        let cache = {
                            title: res.data.title,
                            data: res.data.data,
                            updateAt: res.data.updateAt,
                        }
                        this.$ezstore.counter.set(this.focusKey,cache)
                    }
                })
            },
            refresh() {
                this.getData()
            }
        }
    }
</script>

<style scoped>

</style>